
import React, { useState, useEffect, useRef } from 'react'
import { Layout, Row, Col, Button, Spin } from 'antd';
import { setStore, getStore } from '@/utils/commons'
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import UserMenu from '@/components/userMenu'
import BindEmail from './components/bindEmail'
import UnbindEmail from './components/unbindEmail'
import BindPhone from './components/bindPhone'
import UnbindPhone from './components/unbindPhone'
import BindGoogle from './components/bindGoogle'
import UnbindGoogle from './components/unbindGoogle'
import ChangePwd from './components/changePwd'
import ChangePayPwd from './components/changePayPwd'
import noIcon from '../../assets/img/safe/no.png'
import yesIcon from '../../assets/img/safe/yes.png'
import mailIcon from '../../assets/img/safe/mail.png'
import passwordIcon from '../../assets/img/safe/password.png'
import phoneIcon from '../../assets/img/safe/phone.png'
import cardIcon from '../../assets/img/safe/card.png'
import googleIcon from '../../assets/img/safe/google.png'
import moneyIcon from '../../assets/img/safe/money.png'
import './index.scss';
import API from '@/api/api';
const { Content } = Layout;

function Safe(props) {

    const [load, setLoad] = useState(true)
    const [bindEmailStatus, setBindEmailStatus] = useState(false)
    const [unBindEmailStatus, setUnBindEmailStatus] = useState(false)
    const [bindPhoneStatus, setBindPhoneStatus] = useState(false)
    const [unBindPhoneStatus, setUnBindPhoneStatus] = useState(false)
    const [unBindGoogleStatus, setUnBindGoogleStatus] = useState(false)
    const [pwdStatus, setPwdStatus] = useState(false)
    const [payPwdStatus, setPayPwdStatus] = useState(false)
    const [safeStatus, setSafeStatus] = useState({})
    const [safeList, setSafeList] = useState([
        { en: "email", name: '邮箱验证', desc: '登录、提现、修改安全设置时使用', icon: mailIcon, status: 1 },
        { en: "password", name: '登录密码', desc: '登录时使用', icon: passwordIcon, status: 1 },
        { en: "phone", name: '短信验证', desc: '登录、提现、修改安全设置时使用', icon: phoneIcon, status: 1 },
        { en: "googleAuth", name: '谷歌验证', desc: '登录、提现、修改安全设置时使用', icon: googleIcon, status: 1 },
        { en: "paymentPassword", name: '资金密码', desc: '交易、提现、设置收款地址时使用', icon: moneyIcon, status: 1 }
    ])
    const googleRef = useRef();


    useEffect(() => {
        getUserVerify()
    }, [])

    const getUserVerify = async () => {
        let res = await API.userVerify()
        if (res) {
            setSafeStatus(res.data)
            setSafeList(verifyMerger(res.data))
            setStore('userVerify', JSON.stringify(res.data))
            setLoad(false)
        } else {
            setLoad(false)
        }
    }

    const verifyMerger = (data) => {
        if (data) {
            let tempArr = []
            safeList.map((value, index) => {
                for (let i in data) {
                    if (value.en === i) {
                        value.status = data[i]
                        tempArr.push(value)
                    }
                }
            })
            return tempArr
        }
    }

    const bind = type => {
        switch (type) {
            case 'phone':
                setBindPhoneStatus(true)
                break;
            case 'email':
                setBindEmailStatus(true)
                break;
            case 'googleAuth':
                googleRef.current.openModal()
                break;
            default:
                break;
        }
    }

    const unBind = type => {
        switch (type) {
            case 'phone':
                setUnBindPhoneStatus(true)
                break;
            case 'email':
                setUnBindEmailStatus(true)
                break;
            case 'googleAuth':
                setUnBindGoogleStatus(true)
                break;
            default:
                break;
        }
    }

    const modify = type => {
        switch (type) {
            case 'password':
                setPwdStatus(true)
                break;
            case 'paymentPassword':
                setPayPwdStatus(true)
                break;
            default:
                break;
        }
    }

    const cancelModal = () => {
        setBindEmailStatus(false)
        setUnBindEmailStatus(false)
        setBindPhoneStatus(false)
        setUnBindPhoneStatus(false)
        setUnBindGoogleStatus(false)
        setPayPwdStatus(false)
        setPwdStatus(false)
    }

    const safeItem = (value, index) => {
        return (
            <Row className="safe-item" key={index} align="middle">

                <Col lg={7}>
                    <img className="safe-icon" src={value.icon} />
                    {value.status ?
                        <img className="small-icon" src={yesIcon} /> :
                        <img className="small-icon" src={noIcon} />
                    }
                    <span className="safe-name">{value.name}</span>
                </Col>
                <Col lg={13} className="safe-desc">
                    {value.desc}
                </Col>
                <Col lg={4}>
                    {
                        !value.status ?
                            <Button className="wallet-bth" type="primary"
                                onClick={() => bind(value.en)}>设置</Button> :
                            value.en === 'password' || value.en === 'paymentPassword' ?
                                <Button className="wallet-bth" onClick={() => modify(value.en)}>修改</Button> :
                                <Button className="wallet-bth" onClick={() => unBind(value.en)}>解绑</Button>
                    }
                </Col>
            </Row>
        )
    }

    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>
                <Row className="safe main" justify="space-between">
                    <Col lg={4} md={20}>
                        <UserMenu current="4" />
                    </Col>
                    <Col className="safe-main" lg={19} md={20}>
                        {
                            load ? <div className="safe-mark"><Spin /></div> :
                                safeList.map((value, index) => {
                                    return safeItem(value, index)
                                })
                        }
                    </Col>
                </Row>
            </Content>
            <BindEmail status={bindEmailStatus} close={cancelModal} />
            <UnbindEmail status={unBindEmailStatus} close={cancelModal} />

            <BindPhone status={bindPhoneStatus} close={cancelModal} />
            <UnbindPhone status={unBindPhoneStatus} close={cancelModal} />

            <BindGoogle ref={googleRef} />
            <UnbindGoogle status={unBindGoogleStatus} close={cancelModal} />
            <ChangePwd status={pwdStatus} close={cancelModal} />
            <ChangePayPwd status={payPwdStatus} close={cancelModal} safeStatus={safeStatus} />
            <FooterBox />
        </Layout>
    )
}

export default Safe